<template>
	<view style="background-color: ;">
		<!-- 导航栏 -->
		<view>
			<uni-nav-bar title="任务中心" :border="false" :fixed="true" background-color="#FFFFFF" statusBar="true"
				rightIcon="plus" @clickRight="addWork" style="z-index: 2;">
			</uni-nav-bar>
		</view>
		<!-- 任务标签 -->
		<view style="position: fixed; margin-top: 0px; width: 100%; background-color:white;
		 z-index: 2; border-radius: 0 0 10px 10px;">
			<u-tabs :list="list1" @click="click" :scrollable="false"></u-tabs>
		</view>
		<!-- 任务列表 -->
		<view>
			<!-- 任务模块 -->
			<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll" style="position: fixed; top: 140px;background-color: #EEEFF1;"> -->
			<view style="position: relative;top: 60px;">
				<view class="scroll-view-item" v-for="(taskListItem,taskListIndex) in taskList" :key="taskListIndex"
					style="transform: scale(0.9); height:380rpx;
				background-color:#FFFFFF ; box-shadow: 0 0 5px 2px #EDF1F4;border-radius: 10px;">
					<!-- 订单号 -->
					<view style="display: flex; justify-content:space-between;">
						<view style="margin-top: 15px;margin-left: 15px;">{{taskListItem.order_id}}</view>
						<view style="margin-top: 15px;margin-right: 15px;display: flex;justify-content: space-around;">
							<text>支付方式:&nbsp;</text>
							<up-image :show-loading="true" src="/static/Alipay.png" width="20px" height="20px"
								@click="click" style="margin-right: 5px;"></up-image>
							<up-image :show-loading="true" src="/static/wechat.png" width="22px" height="20px"
								@click="click"></up-image>
						</view>
					</view>
					<u-line :hairline="false" style="margin-top: 20px;transform: scale(0.95);"></u-line>
					<!-- 任务标题 -->
					<view style="display: flex; justify-content:space-between;">
						<view style="margin-top: 15px;margin-left: 15px;">
							<text style="">{{taskListItem.title}}</text>
						</view>
						<view style="margin-top: 15px;margin-right: 15px;">
							<text
								style="font-size: 28px; font-weight:800;">{{taskListItem.money}}</text>&nbsp;&nbsp;&nbsp;呜噜币
						</view>
					</view>
					<!--任务时间 和任务奖励-->
					<view style="display: flex; justify-content:space-between;">
						<view style="margin-top: ;margin-left: 15px;">
							<text style="font-size: 12px;font-weight:400;">
								{{taskListItem.data_statr}}至{{taskListItem.data_end}}
							</text>
						</view>
						<view style="margin-top: ;margin-right: 15px;">
							<text style="font-size: 12px;">
								任务奖励
							</text>
						</view>
					</view>
					<!-- 领取 -->
					<view style="display: flex;justify-content: space-between;">
						<!-- 发布人 -->
						<view style="margin-top: 15px;margin-left: 15px;">
							<up-avatar :src="taskListItem.user.avatar" size="40"
								style="box-shadow: 0 0 0 3px white;"></up-avatar>
						</view>
						<view style="margin-top: 20px;margin-right: 15px;">
							<u-button text="" color="#FE4D53" style="width:120px;height: 30px;"
								@click="pullTask(taskListItem.id)" shape="circle" size="mini"><text
									style="font-weight: 400;font-size:14px;">立即领取</text></u-button>
						</view>
					</view>
				</view>
			</view>
			<!-- </scroll-view> -->
		</view>
		<u-tabbar :value="value2" :placeholder="true" @change="name => value2 = name" :fixed="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="任务" icon="photo" @click="click1" badge=""></u-tabbar-item>
			<u-tabbar-item text="兑换" icon="play-right" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="click1"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		workList
	} from "../../request/API/workList";
	import {
		receive
	} from "../../request/API/receiveTask.js";
	export default {
		data() {
			return {
				value2: 1,
				list1: [{
					name: '简单任务',
				}, {
					name: '一般任务',
				}, {
					name: '困难任务'
				}, {
					name: '极限挑战'
				}],
				taskList: []
			}
		},
		methods: {
			pullTask(e) {
				console.log(e)
				const work_id = e
				receive({
						work_id
					})
					.then(data => {
						uni.showToast({
							title: '领取成功',
							icon: '',
							mask: true,
							// duration: 10000, // 设置显示时长为 10 秒
						});
					})
					.catch(Error => {
						uni.showToast({
							title: Error.msg,
							icon: 'none',
						});
					})
			},
			addWork() {
				uni.navigateTo({
					url: '../index/addWork',
					animationType: 'slide-in-bottom',
					animationDuration: 300
				});
			},
			click1: function(e) {
				console.log('click1', e);
				if (e == 3) {
					uni.redirectTo({
						url: "/pages/home/home"
					})
				} else if (e == 0) {
					uni.redirectTo({
						url: "/pages/index/index"
					})
				} else if (e == 2) {
					uni.redirectTo({
						url: "/pages/cash/cash"
					})
				}
			},
		},
		onLoad() {
			const token = uni.getStorageSync('token');
			console.log(token['token'])
			workList({
					token: token['token']
				})
				.then(data => {
					this.taskList = data.data
					console.log(data)
				})
				.catch(error => {

				})
		},
	}
</script>

<style>
	.scroll-Y {
		height: 1500rpx;
		/* margin-top: 44px; */
	}
</style>